<template>
<view class="news">
    <view class="newslist" v-for="(item,index) in list" :key="index">
        <view class="remark">{{item.remark}}</view>
        <image @click="del(item.id)" src="/static/img/delete.jpg"></image>
    </view>

    <button  @click="wordsAdd" class="strue">添加常用语</button>

    <view class="form" v-if="formShow">
        <view class="words_title">
            <text>常用语</text>
            <image @click="wordsClose" src='/static/img/none_close.png'></image>
        </view>
        <view class="text_remark">
            <textarea maxlength="-1"  placeholder="请输入常用语" v-model="remark"/>
        </view>
        <button  @click="add" class="form_bottom">添加</button>
    </view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			list:[],
			formShow:false,
			remark:''
		}
	},
	onLoad:function() {
		this.getList()
	},
	methods: {
		getList:function(){
		    var that = this
		    var data = {
				'uid':uni.getStorageSync('uid')
			}
			request({
				url: 'problem/words',
				method: 'get',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						that.list = res.data.data
					}
				}
			})
		},
		del:function(id){
			var data = {id:id}
			var that = this
			request({
				url: 'problem/wordsDel',
				method: 'delete',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						uni.showToast({
							title: '删除成功!!',
							icon: "success", 
							position:'bottom',
						});
						that.getList();
					}
				}
			})
		},
		wordsAdd:function(){
			this.formShow = true
		},
		wordsClose:function(){
			this.formShow = false
		},
		add:function(){
			if(!this.remark){
				uni.showToast({
					title: '请输入常用语!!',
					icon: "success", 
					position:'bottom',
				});
				return;
			}
			var data = {
				uid:uni.getStorageSync('uid'),
				remark:this.remark
			}
			var that = this
			request({
				url: 'problem/wordsAdd',
				method: 'post',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						that.formShow = false
						uni.showToast({
							title:'添加成功',
							icon: 'success',
							duration: 2000,
							success() {
								setTimeout(function() {
									uni.navigateBack()
								}, 2000);
							}
						})
					}
				}
			})
		}
	}
}
</script>
<style>
.news {
    width:100%;
    background: #FFF;
    display: flex;
    flex-direction: column;
}

.newslist {
    display: flex;
    flex-direction:row;
    width:100%;
    border-bottom: 1px solid #efefef;
    padding: 20rpx 20rpx 20rpx 20rpx;
}
.remark{
    width:85%;
    flex-wrap: wrap;
}
.newslist image{
    margin-left:10rpx;
    width:50rpx;
    height:50rpx;
}
.strue{
    height:80rpx;
    line-height:80rpx;
    left:10%;
    bottom: 20rpx;
    width:80%;
    background:#ff861a;
    position: fixed;
    z-index:999;
}
.form{
    width: 100%;  
    z-index:9999;
    position: fixed;
    bottom: 0;
    background-color: #F4F4F6;
    height:650rpx;
    border-top:1rpx solid #cccccc;
}
.words_title{
    width:95%;
    height:50rpx;
    line-height: 50rpx;
    display: flex;
    flex-direction:row;
    padding:15rpx 15rpx 15rpx 15rpx;
    justify-content: space-between;
    font-size:20px;
  }
  .words_title image{
    width:50rpx;
    height:50rpx;
  }
  .text_remark{
      width:100%;
      padding:20rpx 20rpx 20rpx 20rpx;
  }
  .text_remark textarea{
      width:92%;
      border:1rpx dashed #cccccc;
      padding:10rpx 10rpx 10rpx 10rpx;
      height:260rpx;
  }
  .form_bottom{
    height:80rpx;
    line-height:80rpx;
    margin-left:10%;
    margin-top:30rpx;
    width:80%;
    background:#ff861a;
  }	
</style>